<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Widget :: Suggestions</title>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="../js-lib/jquery/ui/jquery-ui-1.8.21.custom.js"></script>

		<script type="text/javascript" src="widget/suggestions-widget.js"></script>
		<script type="text/javascript" src="../FilterJson/plugin/jquery-filter-json-plugin.js"></script>
		<link rel="stylesheet" type="text/css" href="style/suggestions-widget-style.css" />
		
		<style type="text/css">
			.marginTB5px {
				margin: 5px 0px;
			}
			.marginL20px {
				margin-left: 500px;
			}
			.x-inline-block {
				display: inline-block;
				zoom: 1;
				*display: inline;
				 _height: 30px;
			}
		</style>
	</head>
	
	<body>
		<div class="marginTB5px x-inline-block"><textarea id="textarea-1" class="x-suggestions x-textarea"></textarea></div>
		<br/>
		<div class="marginTB5px x-inline-block"><textarea id="textarea-2"  class="x-suggestions x-textarea"></textarea></div>
		<br/>
		<div class="marginTB5px x-inline-block"><textarea id="textarea-3"  class="x-suggestions x-textarea"></textarea></div>
	</body>
	
	<script type="text/javascript">
		$( document ).ready(function() {
			$( '.x-suggestions' ).suggestions({
				url: "/rnd-congregate/resources/cricketers.json",
				elementValueProperty: "name",
				template: "<div title=\"{@:name}\"><div>{@:name}</div></div>",
				triggerOn: "@",
				closeBtnRequired: false,
				footerRequired: true,
				persistState: false,
				keyNavigation: {
					next_prev: false
				}
			});
		});
	</script>
</html>
